<template>
	<view>
		<view class="content">
			<view class="boxShadow con">
				<u-search v-model="keyword" :shape="'square'" :show-action="false" bg-color="#fff" height="72"
					placeholder="请输入客户昵称/手机号" style="width: 100%;" @change="searchChange">
				</u-search>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="item boxShadow" v-for="(item,index) in list" :key="item.memberNo">
					<view class="f-c-fs">
						<view class="label">微信昵称：</view>
						<view class="value">{{item.vxName}}</view>
					</view>
					<view class="f-c-fs">
						<view class="label">联系电话：</view>
						<view class="value">{{item.contactPhone}}</view>
					</view>
					<view class="f-c-fs">
						<view class="label">注册方式：</view>
						<view class="value">{{item.memberSource|memberSource}}</view>
					</view>
					<view class="f-c-fs">
						<view class="label">最近访问时间：</view>
						<view class="value">{{item.lastLoginTime}}</view>
					</view>
					<view class="detailBtn" @click="goDetail(item.memberNo)">详情</view>
				</view>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	import {
		customerList
	} from '@/api/marketingB-helper.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keyword: '',
				list: []
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onLoad() {},

		methods: {
			upCallback(page) {
				customerList({
					keyword: this.keyword,
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			searchChange() {
			  this.mescroll.triggerDownScroll();	
			},
			goDetail(memberNo) {
				this.$navigateTo('./detail', {
					customerNo: memberNo
				});
			},
		}
	};
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background: #f5f5f5;
		box-sizing: border-box;
        .con {
			margin: 10rpx 5%;
        	width: 90%;
        	height: 72rpx;
        	opacity: 1;
        	background: #ffffff;
        	border-radius: 8px;
        	font-size: 24rpx;
        	font-weight: 500;
        	text-align: left;
        	color: #cdcdcd;
        	box-sizing: border-box;
        }
	

		.item {
			background-color: #ffffff;
			border-radius: 16rpx;
			margin: 10rpx 20rpx;
			padding: 20rpx;
			position: relative;
			.label {
				margin: 15rpx 0;
				color: #666;
			}
			.value {
				color: #333;
			}
			.detailBtn {
				background-color: #177fff;
				color: #ffffff;
				padding: 0 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 30rpx;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
		}


	}
	/deep/ .empty-icon{
		display: inline-table;
	}
</style>
